//中间视图区
<template>
  <draggable
    :list="list"
    item-key="id"
    :group="{ name: 'article', pull: '' }"
    :disabled="false"
    @add="handleAdd"
    @start="handleStart"
    @end="handleEnd"
    class="dragArea2"
    :animation="300"
  >
    <template #item="{ element, index }">
      <div>
        <component :is="element.tag" v-bind="element"></component>
      </div>
    </template>
  </draggable>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, toRaw } from "vue";
import draggable from "vuedraggable";
const staticData = {};
export default defineComponent({
  name: "CenterView",
  components: {
    draggable
  },
  setup() {
    const data = reactive({
      list:[],
    });
    const mothods = {
      handleAdd(event){
        console.dir(event);
      },
      handleStart(event){
        console.dir(event);
      },
      handleEnd(event){
        console.dir(event);
      }
    };
    return {
      ...toRefs(data),
      ...staticData,
      ...mothods,
    };
  },
});
</script>
<style lang="less" scoped>
.dragArea2{
  width: 100%;
  height: 100%;
}
</style>
